歐拉～
本週結束了分領域
雖然每週都為了Web的演示以及龐大的作業量追著跑
但是結束並沒有感到鬆一口氣
因為接下來迎接我的就是
。
。
。
期末專題拉！
真的同時被 學習前端技術 ＆ 準備期末專題 搞得焦頭爛額Ｔ＿Ｔ
本週最後一次的前端內容是教有名的框架：Vue
以下提供不專業筆記：
元件名稱大寫開頭
import引用(印用某一套件，但還不能使用)→components註冊→template使用(定義成標籤)
CSS有個屬性→幫你產生亂碼名字，就不會讓className與別人重複
{{與資料綁定的變數名稱}}
v-text="與資料綁定的變數名稱"
v-html="與資料綁定的變數名稱"
ex
fanny
<h1>{{ msg }}<h1>
<p v-text="msg"></p>//=elem.textContent="...";
<p v-html="htmlcode"></p>//=elem.innerHTML=`...`;
屬性綁定
v-bind:src="與資料綁定的變數名稱"
:src="與資料綁定的變數名稱"
ex
<img v-bind:src="src" v-bind:alt="alt" v-bind:class="className" />
<img :src="item.src" :alt="item.alt" :class="item.className" />
return {
msg: "Hello Away",
htmlCode: `<a href="https://www.cmoney.tw" style="font-size: 1.5em">Link</a>`,
src: "https://www.wdh2o.idv.tw/wp-content/uploads/2012/12/paper.jpg",
alt: "Illustrator – 摺紙效果",
className: "img-resp",
item: {
src:
"https://www.wdh2o.idv.tw/wp-content/uploads/2015/08/ingress_xmp.jpg",
alt: "Ingress Weapon – Xmp Burster",
className: "img-nl",
},
v-if, v-else, v-show, v-else-if
v-if 與 v-show 所呈現的視覺化效果是相同的，差異在於：
一次性的顯示或隱藏，建議使用 v-if；若是讓使用者切換的顯示或隱藏，建議使用 v-show。
ex
<p v-if="!isMale">男</p>
<p v-else>女</p>
<p v-show="isShow">//如果false還是會渲染出來display:none
v-show 是利用 CSS 的 inline style 來進行顯示或隱藏。
</p>
class與style綁定/樣式控制
class
<p :class="{'text-danger': isActive}">文字內容</p>
<div class="box" :class="classList">
<div class="box__item"></div>
<div class="box__item"></div>
<div class="box__item"></div>
</div>
return{
isActive: true,
classList: {
"box-stack": true,----表示垂直樣式的class是true
"box-matrix": false,
},
}
列表渲染
v-for
ex
<ul>
<li v-for="(item, index) in listData" :key="index">{{ item }}</li>
</ul>
//(listData: ["html", "rwd", "javascript", "vue", "sass"],)->會藉由v-for逐一列出item
<div>
<img
v-for="(item, index) in ad.picItems"
:src="item"
:key="index"
alt=""
/>
</div>
//picItems: [
"https://www.wdh2o.idv.tw/wp-content/uploads/2015/12/ingress_guardian.jpg",
"https://www.wdh2o.idv.tw/wp-content/uploads/2015/08/ingress_xmp.jpg",
"https://www.wdh2o.idv.tw/wp-content/uploads/2015/08/ingress_intro.jpg",
"https://www.wdh2o.idv.tw/wp-content/uploads/2013/01/html5.jpg",
"https://www.wdh2o.idv.tw/wp-content/uploads/2012/12/spry-menu.jpg",
],
不要同時使用 v-for 與 v-if
如果這兩項在同一個節點上，v-for 的優先權會比 v-if 更高，也就是 v-if 將會重複執行在每個 v-for 之中。
ex
<ul v-if="listData">
<li v-for="item in listData"> {{ item }} </li>
</ul>
<p v-else> 目前沒有資料 </p>
computed(在vue裡面是個計算的屬性)
ex:篩選出40歲以下的員工
<ul v-if="computedFilter && computedFilter.length">
<li v-for="(item, index) in computedFilter" :key="index">
{{ index }} - {{ item.name }}，年齡 {{ item.age }} 歲，專長 {{ item.skill }}
</li>
</ul>
computed: {
computedFilter() {
return this.employeeData.filter(item => item.age < 40);
},
employeeData: [
{ name: "Away", age: 40, skill: "RWD" },
{ name: "Zero", age: 30, skill: "APP" },
{ name: "Jamei", age: 20, skill: "Data Base" },
{ name: "Rick", age: 10, skill: "F2E" },
],
this.axios.get(api).then((response) => {
console.log(response.data)
})
--------------or------------------
this.$http.get(api).then((response) => {
console.log(response.data)
})
post必須是物件
這邊不需要手動轉json
ex
export default {
name: 'App',
data(){
return {
data: [],
};
},
created() {
this.$http.get('./static/data.json').then(res => {
this.data = res.data;
});
},
}
記得要記得要運行就要：引入→註冊→掛載到畫面
元件化：將html抽出去
元件包裝：一個vue檔裡面包其他vue檔
向內傳遞
利用props:[ ]陣列
靜態傳遞：自己在掛載地方更改
ex
//在Pic.vue裡
<template>
<figure>
<img :src="imgSrc">
<figcaption>{{ imgCaption }}</figcaption>
</figure>
</template>
<script>
export default {
props:['imgSrc', 'imgCaption'],
}
</script>
//在App.vue裡
<h2>靜態傳遞</h2>
<Pic
img-src="https://www.apple.com/v/mac/home/at/images/overview/compare/macbook_pro_16__x90efpvdutu6_large_2x.jpg"
img-caption="靜態傳遞的文字內容"
/>
動態傳遞：利用資料傳遞
ex
//在App.vue裡的HTML
<h2>動態傳遞</h2>
<Pic
:img-src="src"
:img-caption="title"
/>
//在App.vue裡的Script
return {
src:
'https://www.apple.com/v/mac/home/at/images/overview/compare/macbook_air__bfz9o93hnyuq_large_2x.jpg',
title: '動態傳遞的文字內容',
};
},
向外傳遞
利用$emit
ex
//在Post元件裡
<button type="button" @click="$emit('updateSize')">放大文字</button>
//在App.vue的template裡
<Post
:style="{ fontSize: `${textSize1}em` }"
@updateSize="textSize1 += .1"
/>
ex
在App.vue裡
<template>
<div id="app">
<Click />
<ClickCounter />
<ClickToggle />
<ClickModifier />
<KeyUp />
</div>
</template>
<script>
import Click from "./components/Click
export default {
name: "App",
components: {
Click,
},
};
</script>
在Click.vue裡
<template>
<div>
<img
:src="src"
:alt="title"
v-on:click="atClick"----> v-on： 可改成＠
>
</div>
</template>
<script>
export default {
name: "BaseClick",
data() {
return {
title: "HTML5",
url: "https://www.wdh2o.idv.tw",
src: "https://www.wdh2o.idv.tw/images/html5/html5.jpg",
};
},
methods: {
atClick(e) {
alert(this.title);
open(this.url, '_blank');
},
},
};
</script>
a標籤按的時候如果沒有網址會重整畫面，我已改他修飾符號.preven取消預設
ex
在KeyUp.vue裡
<template>
<div>
<h1 class="text-center">Vue - KeyUp</h1>
<h2>enter</h2>
<div>
<input type="text" @keyup.enter="atKeyUp('enter')" />
</div>
<h2>space</h2>
<div>
<input type="text" @keyup.space="atKeyUp('space')" />
</div>
<h2>ctrl + enter</h2>
<div>
<input type="text" @keyup.ctrl.enter="atKeyUp('ctrl + enter')" />
</div>
</div>
</template>
<script>
export default {
methods: {
atKeyUp(m) {
console.log(m);
},
},
};
</script>
同場加應本週演示幸運抽到的題目：
vue的計算屬性
基本範例：
預設只有 getter 的 computed
new Vue({
computed: {
computedData: function () {
return // ...
}
}
})
有 setter 和 getter 的 computed
new Vue({
computed: {
computedData: {
get: function () {
return // ...
},
set: function () {
// ...
}
}
}
})
翻轉字
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
→當我們遇到計算過於複雜還會重複使用時候就使用computed
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
不能重複宣告
如果使用箭頭函式的話， this 將指向 window ，而非 Vue
只要 computed property 原始依賴響應的資料 沒有更動，Vue 並不會重新求取 computed property，而是訪問其 緩存結果
computed: {
now: function () {
return Date.now()
}
}
//Date.now() is not a reactive dependency
computed是依照資料來源所連動，Date未經Vue處理過
閱讀性
computed > methods
在表達上computed就是資料型態，顯示上比較容易辨別
Catch
computed 有Catch！
假設computed的原始資料來源沒變動，他就只會執行一次，然後把內容catch住，你在跟他要的時候他會直接拿出來回應你。
看完以上的範例，來做個小總結，computed 優點在於由於緩存的特性，一旦使用的大量的計算，在既有響應依賴資料沒有更動的前提下，computed 不會重新計算求值，減少性能上的開銷;
反之，若是有需要隨時更新、不希望緩存的情境，則可以使用 method 替代。
以上就是我本週分領域的筆記～
iThome鐵人賽
看影片追技術